<template>
  <div class="hs-panel ">
    <div class="hs-panel hs-bg-card">
      <div class="hs-panel-title">
        <h4> Redis的实时内存占用情况</h4>
      </div>
      <div id="line-memory" class="chart-line"> </div>
    </div>

    <div class="hs-panel hs-bg-card mt-1" >
      <div class="hs-panel-title">
        <h4> Redis的实时Key数量</h4>
      </div>
      <div id="line-key" class="chart-line"> </div>
    </div>

    <div class="hs-panel hs-bg-card mt-1" >
      <div class="hs-panel-title">
        <h4> Redis详细信息</h4>
      </div>
      <el-table :data="list"
                v-loading.body="listLoading"
                fit
                :show-header="false"
                style="width: 100%;">
        <el-table-column width="200" label="键" prop="key" style="font-weight: bold;">
        </el-table-column>
        <el-table-column width="200" label="值" prop="value">
        </el-table-column>
        <el-table-column label="描述" prop="description">
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { info, keys, memory } from 'api/admin/redis'
import { mapGetters } from 'vuex'
let charts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'gateLog',
  data () {
    return {
      list: null,
      listLoading: true,
      keysData: [],
      keysTimes: [],
      memoryData: [],
      memoryTimes: [],
      keysChart: undefined,
      memoryChart: undefined,
      redis_manage_monitor: true
    }
  },
  computed: {
    ...mapGetters({
      elements: 'userElements'
    })
  },
  created () {
    if (this.elements) {
      // this.redis_manage_info = this.elements['redis:info']
      // this.redis_manage_monitor = this.elements['redis:monitor']
    }
  },
  mounted () {
    this.getList()
    if (this.redis_manage_monitor) {
      this.$nextTick(this.initChart)
    }
  },
  methods: {
    getList () {
      this.listLoading = true
      info().then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    initChart () {
      if (!this.memoryChart) {
        this.memoryChart = charts.init(document.getElementById('line-memory'))
        let option = {
          tooltip: {
            trigger: 'axis',
            formatter: '{value} K',
            axisPointer: {
              animation: false
            }
          },
          xAxis: {
            data: this.memoryTimes,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: ['0', '10%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: 'Redis内存占用',
            type: 'line',
            hoverAnimation: false,
            data: this.memoryData
          }]
        }
        this.memoryChart.setOption(option)
      }
      this.getCurrentMemory()
      if (!this.keyChart) {
        this.keyChart = charts.init(document.getElementById('line-key'))
        let option2 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              animation: false
            }
          },
          xAxis: {
            data: this.keysTimes,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            boundaryGap: ['0', '10%'],
            splitLine: {
              show: true
            }
          },
          series: [{
            name: 'Redis中的Keys数量',
            type: 'line',
            hoverAnimation: false,
            data: this.keysData
          }]
        }
        this.keyChart.setOption(option2)
      }
      this.getCurrentKeys()
    },
    getCurrentKeys () {
      keys().then(response => {
        let data = response.data
        let date = new Date(data.create_time)
        let time = [date.getHours(), date.getMinutes(), date.getSeconds()].join(':')
        let chartData = {
          value: [time, data.dbSize]
        }

        this.keysData.push(chartData)
        if (this.keysData.length > 10) {
          this.keysData.shift()
        }
        this.keysTimes.push(time)
        if (this.keysTimes.length > 10) {
          this.keysTimes.shift()
        }
        this.keyChart.setOption({
          series: [{ data: this.keysData }],
          xAxis: [{ data: this.keysTimes }]
        })
        if (!this || this._isDestroyed) {
          return
        }
        setTimeout(() => {
          this.getCurrentKeys()
        }, 10000)
      })
    },
    getCurrentMemory () {
      memory().then(response => {
        let data = response.data
        let date = new Date(data.create_time)
        let memory = parseInt(data.used_memory) / 1000
        let time = [date.getHours(), date.getMinutes(), date.getSeconds()].join(':')
        let chartData = {
          value: [time, memory]
        }
        this.memoryData.push(chartData)
        if (this.memoryData.length > 10) {
          this.memoryData.shift()
        }
        this.memoryTimes.push(time)
        if (this.memoryTimes.length > 10) {
          this.memoryTimes.shift()
        }
        this.memoryChart.setOption({
          series: [{ data: this.memoryData }],
          xAxis: [{ data: this.memoryTimes }]
        })
        if (!this || this._isDestroyed) {
          return
        }
        setTimeout(() => {
          this.getCurrentMemory()
        }, 10000)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.chart-line {
  width: 100%;
  height: 240px;
  margin: auto;
}
</style>
